<template>
    <l-layout class="l-chat-user-list" :top="36" :topMove="false" :bottom="44" :bottomMove="false" v-loading="loading">
        <template #top >
            <el-input v-model="keyword" size="small" placeholder="搜索：请输入关键词"  @keyup.enter.native="hanleSearch" clearable >
                <i slot="suffix" class="el-input__icon el-icon-search" @click="hanleSearch" />
            </el-input>
        </template>
        <div v-if="showUserList.length > 0 "  class="l-rblock" style="overflow: auto;">
            <div v-for="(item,index) in showUserList " :key="index" class="l-chat-user-list-item" @click="handleOpenMsg(item)">
                <div class="l-chat-user-list-close" @click.stop="handleClose(item,index)" ><i class="el-icon-close" ></i></div>
                <el-avatar :size="36" :src="avatar(item)" class="l-chat-user-list-avatar">
                    <img :src="`${rootUrl}img/admin/head.png`"/>
                </el-avatar>
                <div class="l-chat-user-list-text">
                    <p class="title">{{getTitle(item)}}&nbsp;</p>
                    <p class="msg">
                        <span>{{item.f_Content}}</span>
                    </p>
                </div>
                <div class="l-chat-user-list-time" >{{getTime(item.f_Time)}}</div>
                <el-badge v-if="item.f_NoReadNum" :value="item.f_NoReadNum" class="l-chat-user-list-badge"></el-badge>
            </div>
        </div>
        <div v-else-if="!loading" class="no-data" >
            <p class="no-data-text" >{{$t('暂无联系人')}}</p>
            <el-button type="primary" size="small" @click="handleAddUser">添加</el-button>
        </div>
        <template #bottom >
            <div class="l-rblock l-chat-user-list-bottom" v-if="showUserList.length > 0" >
                <el-button size="small" @click="handleAddUser">添加联系人</el-button>
            </div>
        </template>


        <l-dialog
            :title="$t('添加联系人')"
            :visible.sync="addUserVisible"
            :height="480"
            width="1024px"

            @ok="handleUserSelectOk"
            @closed="handleUserSelectClosed"
        >
            <l-user-select-panel ref="userSelectPanel" ></l-user-select-panel>
        </l-dialog>
        <chat-box :visible.sync="chatVisible" :otherId="otherId" :updateList="updateList"></chat-box>
    </l-layout>
</template>

<script>
import ChatBox from './chatBox.vue'
export default {
    name: "chat-list",
    inject: ["top"],
    components:{
        ChatBox
    },
    data () {
        return {
            keyword:'',
            addUserVisible:false,
            chatVisible:false,
            
            loading:false,
            userList:[],
            showUserList:[],

            otherId:'',

        }
    },
    created () {
    },
    computed: {
        msg(){
            return this.$store.state.message.msg.map
        },
    },
    props: [],
    methods: {
        isAddNum(item){           
            if(!this.loading){
                const myItem = this.userList.find(t=>t.f_MyUserId == item.f_RecvUserId && t.f_OtherUserId == item.f_SendUserId)
                if(myItem){
                    myItem.f_NoReadNum += 1
                    if(this.chatVisible && item.f_SendUserId == this.otherId){
                        myItem.f_NoReadNum = 0
                    }
                    myItem.f_Content = item.f_Content
                    myItem.f_Time = item.f_CreateDate
                    this.hanleSearch()
                }
                else{
                    this.loadData()
                }
            }

            if(this.chatVisible && item.f_SendUserId == this.otherId){
                const api = window.$api.message.contact
                api.updateState(this.otherId)
                return false
            }

            return true
        },
        updateList(otherId,msg,time){
            const myItem = this.userList.find(t=> t.f_OtherUserId == otherId)
            myItem.f_Content = msg
            myItem.f_Time = time
            this.hanleSearch()
        },
        async loadData(){
            this.loading = true
            const api = window.$api.message.contact
            const data = (await this.$awaitWraper(api.getList())) || []
            data.forEach(item => {
                this.lr_loadUsers(item.f_OtherUserId)
            })
            this.userList = data || []
            this.showUserList = this.$deepClone(this.userList)
            this.loading = false
        },
        hanleSearch(){
            if(this.keyword){
                this.showUserList = this.userList.filter(t=>this.getTitle(t).indexOf(this.keyword) > -1)
            }
            else{
                this.showUserList = this.$deepClone(this.userList)
            }
        },
        handleClose(item,index){
            this.showUserList.splice(index,1)
            this.userList.splice(this.userList.findIndex(t=>t.f_Id == item.f_Id),1)
            const api = window.$api.message.contact
            api.remove(item.f_Id)
        },
        handleOpenMsg(item){
            this.otherId = item.f_OtherUserId
            const api = window.$api.message.contact
            api.updateState(item.f_Id)
            this.top.updateChatNum(item.f_NoReadNum)
            item.f_NoReadNum = 0
            this.chatVisible = true
        },

        handleAddUser(){
            this.addUserVisible = true
        },
        async handleUserSelectOk(){
            const selectData = this.$refs.userSelectPanel.getForm().map(t=>{return {f_MyUserId:this.loginInfo.f_UserId,f_OtherUserId:t.f_UserId}})
            const api = window.$api.message.contact
            this.addUserVisible = false
            this.loading = true
            await this.$awaitWraper(api.addList(selectData))
            await this.loadData()
        },
        handleUserSelectClosed(){
            this.$refs.userSelectPanel.resetForm()
        },

        avatar(item){
            const user = this.lr_users[item.f_OtherUserId]
            if(user){
                return user.f_HeadIcon ? `${this.apiUrl}organization/user/img/${user.f_HeadIcon}?token=${this.token}` : `${this.rootUrl}img/admin/head.png`
            }
            return `${this.rootUrl}img/admin/head.png`
        },
        getTitle(item){
            const user = this.lr_users[item.f_OtherUserId]
            if(user){
                let res =  user.f_RealName
                if(user.f_DepartmentId){
                    this.lr_loadDepartment(user.f_DepartmentId)
                    const department = this.lr_department[user.f_DepartmentId]
                    if(department){
                        res += `/${department.f_FullName}`
                    }
                }
                return res
            }
            else{
                return ' '
            }
        },
        getTime(time){
            const nowDate = this.$getDayTime('yyyy-MM-dd')
            const myDate = this.$formatDate(time,'yyyy-MM-dd')
            if(nowDate != myDate){
                return myDate
            }
            else{
                return this.$formatDate(time,'HH:mm:ss')
            }
        }
    }
};
</script>

<style lang="scss">
.l-chat-user-list{
    .el-input__inner {
        border-radius: 0 !important;
        border-right: none !important;
        border-left: none !important;
        border-top: none !important;
        
    }
    .el-input__icon {
        cursor: pointer;
    }
    .no-data{
        position:absolute;
        top:50%;
        margin-top: -100px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
        &-text {
            font-size: 14px;
            color: #909399;
            line-height: 20px;
            text-align: center;
            padding-top: 20px;
        }
    }

    &-bottom{
        text-align: center;
        padding: 0 8px;
        .el-button{
            width: 100%;
        }
    }

    &-item{
        position: relative;
        padding: 11px 64px 0 60px;
        background-color: #fff;
        border-bottom: 1px solid #f5f7f9;
        height: 64px;
        cursor: pointer;
        transition: all .3s;
        &:hover {
            background-color: #e6f7ff;
        }
    }
    &-close{
        position: absolute;
        top:24px;
        left: 4px;
        color: #666;
        display: none;
        cursor: pointer;
        &:hover{
            color: #409EFF;
        }
        
    }
    &-item:hover &-close{
        display: block;
    }
    &-avatar{
        position: absolute;
        top:14px;
        left: 24px;
    }

    &-text{
        margin-left: 14px;
        overflow: hidden;
        flex: 1;
        padding-top: 1px;

        .title {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 14px;
          color: #333;
          margin: 0;
          margin-bottom: 4px;
        }
        .msg {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin: 0;
            font-size: 12px;
            color: #999;
        }
    }

    &-time{
        position: absolute;
        top:14px;
        right: 8px;
        font-size: 12px;
        color: #666;
    }

    &-badge{
        display: block;
        position: absolute;
        top:40px;
        right: 8px;

        
    }
}
</style>
